<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" th:with="title='新增客户'">
<meta charset="utf-8">
<header th:replace="header::headerFragment(${title})"></header>
<body class="gray-bg">
	<div class="wrapper wrapper-content ">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-content">
						<form class="form-horizontal m-t" id="userForm">
							<div class="form-group">
								<label class="col-sm-3 control-label">用户名：</label>
								<div class="col-sm-8">
									<input id="userName" name="userName" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">昵称：</label>
								<div class="col-sm-8">
									<input id="name" name="name" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">密码：</label>
								<div class="col-sm-8">
									<input id="password" name="password" class="form-control" type="password">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">重复密码：</label>
								<div class="col-sm-8">
									<input id="confirm_password" name="confirm_password" class="form-control" type="password">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">部门：</label>
								<div class="col-sm-8">
									<input class="form-control" type="text" name="deptName" onclick="selectDeptTree()" readonly="readonly" id="deptName"> <input id="deptId" name="deptId" class="hidden">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">邮箱：</label>
								<div class="col-sm-8">
									<input id="email" name="email" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<label class="col-sm-3 control-label">手机号：</label>
								<div class="col-sm-8">
									<input id="mobile" name="mobile" class="form-control" type="text">
								</div>
							</div>
							<div class="form-group">
								<div class="col-sm-8 col-sm-offset-3">
									<button type="submit" class="btn btn-primary">提交</button>
								</div>
							</div>
						</form>
					</div>
				</div>
			</div>
		</div>
	</div>
	<div th:replace="footer :: footer"></div>
	<script type="text/javascript">
		$().ready(function() {
	        validateRule();
        });

        $.validator.addMethod("isMobile", function(value, element) {
	        var length = value.length;
	        var mobile = /^1[0-9]{10}$/;
	        return this.optional(element) || (length == 11 && mobile.test(value));
        }, "请正确填写您的手机号码");

        $.validator.setDefaults({
	        submitHandler : function() {
		        yimo.ajaxPost({
		            url : ctx + "sys/user/save",
		            data : $('#userForm').serialize(),
		            needClose : true,
		            parentRefresh : true,
		        });
	        }
        });

        function getCheckedRoles() {
	        var adIds = "";
	        $("input:checkbox[name=role]:checked").each(function(i) {
		        if (0 == i) {
			        adIds = $(this).val();
		        } else {
			        adIds += ("," + $(this).val());
		        }
	        });
	        return adIds;
        }

        function validateRule() {
	        var icon = "<i class='fa fa-times-circle'></i> ";
	        $("#userForm").validate({
	            rules : {
	                name : {
		                required : true
	                },
	                userName : {
	                    required : true,
	                    minlength : 2,
	                    remote : {
	                        url : ctx + "sys/user/checkUserNameUnique", // 后台处理程序
	                        type : "post", // 数据发送方式
	                        dataType : "json", // 接受数据格式
	                        data : { // 要传递的数据
		                        username : function() {
			                        return $("#userName").val();
		                        }
	                        },
	                        dataFilter : function(data, type) {
		                        if (data == "true")
			                        return true;
		                        else
			                        return false;
	                        }
	                    }
	                },
	                password : {
	                    required : true,
	                    minlength : 6
	                },
	                confirm_password : {
	                    required : true,
	                    minlength : 6,
	                    equalTo : "#password"
	                },
	                email : {
	                    required : true,
	                    email : true
	                },
	                mobile : {
	                    required : true,
	                    minlength : 11,
	                    maxlength : 11,
	                    isMobile : true
	                },
	            },
	            messages : {
	                name : {
		                required : icon + "请输入昵称"
	                },
	                userName : {
	                    required : icon + "请输入您的用户名",
	                    minlength : icon + "用户名必须两个字符以上",
	                    remote : icon + "用户名已经存在"
	                },
	                password : {
	                    required : icon + "请输入您的密码",
	                    minlength : icon + "密码必须6个字符以上"
	                },
	                confirm_password : {
	                    required : icon + "请再次输入密码",
	                    minlength : icon + "密码必须6个字符以上",
	                    equalTo : icon + "两次输入的密码不一致"
	                },
	                email : icon + "请输入您的E-mail",
	                mobile : {
	                    required : "请输入手机号",
	                    maxlength : "请填写11位的手机号",
	                    maxlength : "请填写11位的手机号",
	                    isMobile : "请填写正确的手机号码"
	                }
	            }
	        })
        }

        /*用户管理-新增-选择部门树*/
        function selectDeptTree() {
	        layer.open({
	            type : 2,
	            title : "选择部门",
	            area : [ '300px', '450px' ],
	            content : ctx + "sys/dept/treeView"
	        })
        }

        function loadDept(deptId, deptName) {
	        $("#deptId").val(deptId);
	        $("#deptName").val(deptName);
        }
	</script>
</body>
</html>
